<template>
	<view>
		<view :style="{opacity:backgroundOpacity}" style="position: relative;z-index: 9;" id="topbar">
			<u-navbar :is-back="false" title="情感话廊" :border-bottom="true" title-color="#000" :background="background"></u-navbar>
		</view>
		<image class="logo" src="/static/icon2/Echo.png"></image>
		
		<view class="head-box">
			<view class="search">
				<view class="search-r">
					<u-search @custom="reSearch" action-text="取消" :show-action="keyword" :action-style="{color:'#81D8D0'}" height="70" @search="search" bg-color="#fff" placeholder="输入你的心情" v-model="keyword"></u-search>
				</view>
			</view>
			<view class="u-flex count" v-if="count">
				<view class="u-flex">
					<text class="num1">{{count.left.name}}</text>
					<text class="num2">{{$app.bigNumberTransform(count.left.value)}}</text>
				</view>
				<view class="u-flex">
					<text class="num1">{{count.right.name}}</text>
					<text class="num2">{{$app.bigNumberTransform(count.right.value)}}</text>
				</view>
			</view>
		</view>
		<view class="tabs" :style="{top:top + 'px'}">
			<u-tabs :list="tabs" :is-scroll="false" active-color="#81D8D0" inactive-color="#666" :current="current" @change="change"></u-tabs>
		</view>
		<view class="list" v-if="!appAuditState">
			<view class="item" v-for="(item,index) in  lists[current]" :key="item.id">
				<view class="user-info u-flex">
					<image :src="item.headimg" class="avatar"></image>
					<view class="info u-flex-1">
						<view class="name u-flex">
							<text class="u-line-1">{{item.nickname}}</text>
							<image class="level" :src="item.levelLogo" v-if="item.levelLogo"></image>
						</view>
						<view class="tag u-line-1">
							<text class="tag-label" v-if="item.tab == 2">专家</text>
							<text class="tag-text">{{item.choice ? '已采纳' : `答案采纳可获得【${item.ecoin}e币】`}}</text>
						</view>
					</view>
				</view>
				<view class="content" @click="jumpInfo(item)">
					<view class="title">{{item.title}}</view>
					<!-- 图文 -->
					<template v-if="item.type == 1">
						<view class="text u-line-2">{{item.content}}</view>
						<view class="images u-flex u-flex-wrap" v-if="item.image.length">
							<image v-for="(img,index) in item.image" :key="img" :src="img" @click.stop="lookImg(img,item.image)" mode="aspectFill"></image>
						</view>
					</template>
					<!-- 音频 -->
					<template v-if="item.type == 2">
						<view class="mp3 u-flex" @click.stop="playMp3(item)">
							<view class="icon" style="padding: 0 20rpx 0 10rpx;">
								<u-icon name="play-circle-fill" color="#fff" size="44"></u-icon>
							</view>
							<v-loading2 :play="item.id === playing.id"></v-loading2>
							<view class="second" v-show="item.content || item.id === playing.id">{{item.id === playing.id ? playing.second : item.content +'s'}}</view>
						</view>
					</template>
				</view>
				<view class="ctrl u-flex">
					<view class="ft-btn u-flex" @click="jumpInfo(item)">
						<text class="iconfont icon-liuyan"></text>
						<view>{{item.replyCount || 0}}</view>
					</view>
					<view class="ft-btn u-flex" :class="{active:item.like}" @click="dolike(item,index,current)">
						<text class="iconfont icon-xin"></text>
						<view>{{item.thumbs || 0}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 发布 -->
		<u-mask :show="show" @click="show = false">
			<push-topics v-if="show" @publish="show = !1"></push-topics>
		</u-mask>
		
		
		<u-mask :show="showIndex">
			<view class="index-show u-flex">
				<view class="index-show-box">
					<image class="go-pay" src="/static/show-index-2.png" mode="widthFix"
						@click="jump('/pages/mine/account?show=1')"></image>
					<view class="u-flex">
						<image class="close" src="/static/close.png" @click="showIndex = false"></image>
					</view>
				</view>
			</view>
		</u-mask>
		
		

		<u-tabbar :mid-button="true" :border-top="false" height="100rpx" bgColor="#67EEE4" :before-switch="beforeSwitch"
			inactive-color="#000" active-color="#fff" v-model="currentTab" :list="vuex_tabbar"></u-tabbar>
		
		
	</view>
</template>

<script>
	import $$app from '../../common/app.js'
	export default {
		data() {
			return {
				tabbg: 'linear-gradient(180deg, #67EEE4 0%, #00D6C2 100%)',
				currentTab:1,//tab栏当前位置
				show:!1,//发布弹框
				backgroundOpacity:0,//导航栏透明度
				background:{
					'background':`#fff url(${$$app.imgUrl}Echo.png) no-repeat 50rpx calc(100% - 20rpx)`,
					'background-size':'155rpx 43rpx'
				},//导航栏背景
				top:null,//tab栏顶部定位
				tabs: [{name: '情感维护'}, {name: '情感表达'},{name: '情感挽回'}],
				current: 0,//当前tab
				lists:{'0':[],'1':[],'2':[]},
				page:{'0':1,'1':1,'2':1},
				status:{'0':'loading','1':'loading','2':'loading'},
				keyword:'',
				playing:{
					second:'',
					id:-1
				},//当前播放的对象
				audio:uni.createInnerAudioContext(),//音频播放上下文对象
				count:'',
				showIndex: !1
			}
		},
		methods: {
			beforeSwitch(e) {
				let url = ''
				if (e == 2) url = '/pages/fabu/index';
				if (e == 3) url = '/pages/college/index';
				if (e == 0) url = '/pages/index/index';
				if (e == 1) url = '/pages/topics/list';
				if (e == 4) url = '/pages/mine/mine';
				// 跳转
				url && uni.switchTab({
					url: url
				})
				return false
			},
			change(index) {
				this.current = index;
				this.keyword = ''
			},
			getList(indexs){
				const index = indexs === undefined ? this.current : indexs
				this.status[index] = 'loading'
				this.$u.api.commentList({
					cate:index + 1,
					page:this.page[index],
					limit:10,
					keyword:this.keyword
				}).then(res=>{
					this.lists[index] = this.page[index] == 1 ? res : this.lists[index].concat(res)
					this.status[index] = res.length  === 10 ? 'loadmore' : 'nomore'
					uni.stopPullDownRefresh()
				})
			},
			lookImg(img,item){
				uni.previewImage({
					urls:item,
					current:img
				})
			},
			playMp3(item){
				this.playing.second = ''
				this.audio.stop()
				this.audio.offEnded()
				this.audio.offTimeUpdate()
				this.audio.offPlay()
				
				
				if(this.playing.id === item.id){
					// 停止当前
					this.playing.id = -1
				}else{
					this.audio.obeyMuteSwitch = !1
					this.audio.src = item.audio
					this.audio.onPlay(() => {
						console.log('开始播放监听')
						this.playing.id = item.id
						this.audio.offPlay()
					})
					this.audio.onEnded(() => {
						console.log('自然结束监听')
						this.audio.offEnded()
						this.audio.offTimeUpdate()
						this.playing.id = -1
					})
					this.audio.onTimeUpdate(()=>{
						console.log(this.audio.currentTime,this.audio.duration)//这行保留
						this.playing.second = Math.floor(this.audio.duration - this.audio.currentTime) + 's'
					})
					this.audio.play()
				}
			},
			dolike(item,index,current){
				if(item.like){
					// 已经喜欢后直接返回，不能取消
					return
				}
				this.$u.api.doLike({comment_id:item.id}).then(res=>{
					let item = this.lists[current][index]
					item.like = !0
					item.thumbs ++
					this.$set(this.lists[current],index,item)
				})
			},
			search(){
				const index = this.current
				this.page[index] = 1
				this.getList()
			},
			reSearch(){
				this.keyword = ''
				this.search()
			},
			jumpInfo(item){
				if(!this.vuex_user){
					this.$app.jump('/pages/login/login')
					return
				}
				if(this.vuex_user.role === 2 || (this.vuex_user.levelId || 0) >= item.levelId){
					this.$app.jump(`/pages/topics/detail?id=${item.id}`)
					return
				}
				this.showIndex = !0
				this.$u.toast('您当前会员等级低于提问者等级，无法查看此问题')
				// setTimeout(_=>{
				// 	this.$app.jump('/pages/mine/account?show=1')
				// },600)
					
			}
		},
		onLoad() {
			//this.getList(0)
			this.getList(1)
			this.getList(2)
		},
		onPageScroll(e) {
			if(e.scrollTop > 50){
				this.backgroundOpacity = 1
				return
			}else{
				this.backgroundOpacity = e.scrollTop / 50
			}
		},
		onReady() {
			setTimeout(()=>{
				const query = uni.createSelectorQuery().in(this);
				query.select('#topbar').boundingClientRect(res=>{
					this.top = res.height
				}).exec()
			},200)
		},
		onReachBottom() {
			const index = this.current
			if(this.status[index] == 'loadmore'){
				this.page[index] ++
				this.getList()
			}
		},
		onPullDownRefresh() {
			const index = this.current
			this.page[index] = 1
			this.getList(index)
		},
		onShow() {
			const index = this.current
			this.page[index] = 1
			this.getList(index)
			this.$u.api.commentStatistics().then(res=>{this.count = res})
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-tabbar__content .u-tabbar__content__item:nth-of-type(3) .u-tabbar__content__item__text text{color: #333;font-weight: bold;}
	
	.logo{width: 155rpx;height: 43rpx;position: fixed;left: 50rpx;display: block;margin-top: -60rpx;}
	.head-box{
		margin: 0 50rpx;padding: 30rpx 0 0;
		.search-r{border-radius: 100rpx;box-shadow: 6rpx 6rpx 16rpx rgba($color: #000000, $alpha: .1);}
		.count{
			justify-content: space-between;padding: 40rpx 0 30rpx;
			view{width: 300rpx;box-shadow: 6rpx 6rpx 16rpx rgba($color: #000000, $alpha: .1);padding: 25rpx 20rpx;flex-wrap: wrap;text-align: center;border-radius: 20rpx;}
			.num1{color: #81D8D0;font-size: 32rpx;font-weight: bold;}
			.num2{color: #333;font-size: 40rpx;font-weight: bold;flex: 1;}
		}
	}
	.tabs{position: sticky;}
	.list{
		.item{
			border-bottom: 10rpx solid #F2F2F2;padding: 40rpx 50rpx 40rpx;
			&:last-child{border-bottom: 0;}
			.user-info{
				.avatar{width: 80rpx;height: 80rpx;border-radius: 50%;display: block;flex-shrink: 0;margin-right: 20rpx;}
				.info{overflow: hidden;
					.name{
						align-items: flex-start;
						.level{flex-shrink: 0;width: 90rpx;height: 52rpx;}
						text{font-weight: bold;font-size: 28rpx;line-height: 50rpx;}
					}
					.tag{
						padding-top: 6rpx;
						.tag-label{background-color: #81D8D0;border: 2rpx solid #81D8D0;border-radius: 8rpx;padding: 2rpx 14rpx;display: inline-block;font-weight: bold;color: #fff;font-size: 24rpx;margin-right: 20rpx;}
						.tag-text{color: #F55332;font-weight: bold;}
					}
				}
			}
			.content{
				margin: 20rpx 0 0 90rpx;background-color: #F8F8F8;border-radius: 20rpx;padding:20rpx 30rpx;
				.title{font-size: 30rpx;font-weight: bold;color: #333;word-break: break-all;text-align: justify;padding-bottom: 10rpx;}
				.text{text-align: justify;}
				.images{
					justify-content: space-between;padding-top: 16rpx;
					image{width: 160rpx;height: 160rpx;border-radius: 10rpx;margin-top: 18rpx;
						&:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3){margin-top: 0;}
					}
					&::after{content: '';display: block;width: 160rpx;}
				}
				.mp3{background-color: #81D8D0;height: 56rpx;border-radius: 100rpx;width: 80%;color: #fff;
					.second{margin-left: auto;margin-right: 20rpx;font-weight: bold;}
				}
				
			}
			.ctrl{
				justify-content: flex-end;padding-top: 40rpx;
				.ft-btn{
					white-space: nowrap;margin-right: 30rpx;
					&:last-child{margin-right: 0;}
					&.active{
						.iconfont,view{color: #F55332;}
					}
					.iconfont{color: #333;font-size: 38rpx;padding-right: 10rpx;}
					view{font-size: 24rpx;color: #666;}
				}
			}
		}
	}
	
	
	.index-show {
		width: 100%;
		height: 100%;
		justify-content: center;
	
		.index-show-box {
			.go-pay {
				width: 600rpx;
				display: block;
				padding-left: 45rpx;
			}
	
			.close {
				width: 60rpx;
				height: 60rpx;
				display: block;
				margin: 0 auto;
			}
		}
	}
</style>
